<template>
	<el-card>
		<div class="arrange-panel-header">
			<div class="class-profiles">
				<div class="title">{{heardTitle}}</div>
			</div>
			<el-button class="float-right" @click="back">{{$t('common.btn.back')}}</el-button>
		</div>
		<div style="margin-top: 24px;">
			<el-row>
				<el-col>
					<div class="float-right">
						<el-button type="danger" @click="batchDeleteCourseMain">{{$t("message.delete")}}</el-button>
						<el-button type="primary" @click="openOprCourseDialog">{{$t("message.add")}}</el-button>
					</div>
				</el-col>
			</el-row>
			<el-row style="margin-top: 16px;">
				<edu-table
					:data="coursesMaintain"
					@selection-change="chooseCourseMaintain"
					@page-change="handleCurrentChange_"
					:total="coursesForm.total_"
					:pageSize="coursesForm.pageSize_"
					:current-page="coursesForm.pageNum_"
				>
					<edu-table-column prop="code" :label="$t('course.courseCode')"></edu-table-column>
					<edu-table-column prop="name" :label="$t('course.courseName')"></edu-table-column>
					<edu-table-column :label="$t('message.operating')">
						<template slot-scope="scope">
							<el-button
								type="text"
								size="mini"
								@click="deleteCourseMaintain(scope.row.id)"
							>{{$t("message.delete")}}</el-button>
						</template>
					</edu-table-column>
				</edu-table>
			</el-row>
		</div>
	</el-card>
</template>
<script>
import {
	batchSaveTags,
	getCourseInfoById,
	EditCourse,
	deleteCourses,
	getCoursesByCondition
} from "common/src/api/resource/publicCourse";

export default {
	name: "LevelMaintenanceComponent",
	props: {
		heardTitle: {
			type: String
		}
	},
	data() {
		return {
			categoryId: "",
			coursesForm: {
				pageNum_: 1,
				pageSize_: 20,
				categoryId: "",
				term: "",
				tag: "",
				type: 2,
				trainingLevel: "",
				faculty: "",
				condition: "",
				total_: 0
			},
			coursesMaintain: [], //维护课程: [],
			chooseCoursesMaintain: []
		};
	},
	created() {
		//this.init();
	},
	computed: {},
	methods: {
		handleCurrentChange_(val) {
			this.coursesForm.pageSize_ = val.pageSize;
			this.coursesForm.pageNum_ = val.pageNum;
			this.getCoursesMaintain();
		},

		getCoursesMaintain(id) {
			if (id) {
				this.categoryId = id;
				this.coursesForm.categoryId = id;
			} else {
				this.coursesForm.categoryId = this.categoryId;
			}
			getCoursesByCondition(this.coursesForm).then(res => {
				if (res.code == 200) {
					res.data.list.forEach((c, index) => {
						c.number = index + 1;
					});
					this.coursesForm.total_ = res.data.total_;
					this.coursesMaintain = res.data.list;
				}
			});
		},
		chooseCourseMaintain(val) {
			this.chooseCoursesMaintain = val;
		},

		deleteCourseMaintain(id) {
			// this.$confirm(this.$t("course.confirmDeleteTip"), this.$t("message.confirm"), {
			// 	confirmButtonText: this.$t("message.confirm"),
			// 	cancelButtonText: this.$t("message.cancel"),
			// 	type: "warning"
			this.$delConfirm().then(() => {
				deleteCourses({ ids: [id] }).then(res => {
					if (res.code == 200) {
						this.$message({
							type: "success",
							message: this.$t("common.tips.opSuccess")
						});
						this.getCoursesMaintain();
					}
				});
			});
		},
		batchDeleteCourseMain() {
			if (this.chooseCoursesMaintain.length == 0) {
				this.$noSelectAlert();
				// this.$message({
				// 	type: "info",
				// 	message: this.$t('courses.plsChooseDelCourse')
				// });
				return;
			}
			// this.$confirm(
			// 	this.$t("course.confirmDeleteTip"),
			// 	this.$t("message.confirm"),
			// 	{
			// 		confirmButtonText: this.$t("message.confirm"),
			// 		cancelButtonText: this.$t("message.cancel"),
			// 		type: "warning"
			// 	}
			this.$delConfirm().then(() => {
				deleteCourses({
					ids: this.chooseCoursesMaintain.map(c => c.id)
				}).then(res => {
					if (res.code == 200) {
						this.$message({
							type: "success",
							message: this.$t("common.tips.opSuccess")
						});
						this.getCoursesMaintain();
					}
				});
			});
		},

		openOprCourseDialog() {
			this.$emit("LevelAddBread", this.categoryId);
		},

		back() {
			this.$emit("back", "maintenance");
		}
	}
};
</script>

<style lang="scss" scoped>
.arrange-panel-header {
	height: 56px;
	border-bottom: 2px solid #dcdfe6;
	cursor: default;
	.title {
		font-size: 20px;
		color: #000;
		font-weight: bold;
	}
	.class-profiles {
		float: left;
		width: 40%;
		div {
			padding: 5px 0;
		}
	}
}
</style>

